<template >
    <page-view>
        <el-card>
            <template #header>
                <div class="flex flex-row justify-between">
                    <div class="font-bold">编辑管理员</div>

                </div>
            </template>

            <el-skeleton :rows="6" animated :loading="isLoading">
                <el-form :model="foodInfoData" label-width="120px" :rules="foodInfoDataRules" ref="formEl">
                    <el-form-item label="管理员名称" prop="admin_name">
                        <el-input placeholder="请输入管理员名称" v-model="foodInfoData.admin_name"></el-input>
                    </el-form-item>

                    <el-form-item label="管理员性别" prop="admin_sex">
                        <el-select v-model="foodInfoData.admin_sex" placeholder="请选择">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="手机号" prop="admin_tel">
                        <el-input placeholder="请输入手机号" v-model="foodInfoData.admin_tel"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="admin_email">
                        <el-input placeholder="请输入邮箱" v-model="foodInfoData.admin_email"></el-input>
                    </el-form-item>

                    <el-form-item label="头像" prop="admin_photo">
                        <el-upload v-model="foodInfoData.admin_photo" :action="baseURL + '/foodInfo/uploadFoodImg'"
                            :headers="{ softeem_ele_admin_token: store.token }" name="admin_photo"
                            class="w-[200px] h-[200px] border border-dashed border-gray-400 flex flex-row justify-center items-center"
                            :before-upload="beforeUpload" v-loading="isUploadingImg" element-loading-text="正在加载图片"
                            :show-file-list="false" :on-success="uploadSuccess">
                            <el-image :src="baseURL + foodInfoData.admin_photo" v-if="foodInfoData.admin_photo"
                                fit="contain" class="w-full h-full" lazy>
                                <template #placeholder>
                                    <div class="text-primaryColor text-[14px] w-full h-full flex flex-row justify-center items-center
                                    ">正在加载图片....</div>
                                </template>
                            </el-image>
                            <el-icon size="65px" color="#808080" v-else>
                                <PictureFilled />
                            </el-icon>
                        </el-upload>

                    </el-form-item>

                    <el-form-item label="管理员性别" prop="admin_type">
                        <el-select v-model="foodInfoData.admin_type" placeholder="请选择">
                            <el-option label="普通管理员" :value="0" />
                            <el-option label="超级管理员" :value="1" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm" :loading="isSumbiting" loading-icon="Loading">
                            保存数据
                        </el-button>
                        <el-button class="text-primaryColor" @click="$router.back()">返回列表</el-button>
                    </el-form-item>
                </el-form>
            </el-skeleton>
            <!-- 表单 -->


        </el-card>
    </page-view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { PictureFilled, Loading } from "@element-plus/icons-vue";
import API from "@/utils/API/index.js";
import { onMounted, inject } from "vue";
import { ElNotification } from "element-plus";
import { mainStore } from "../../store/index"
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()


const store = mainStore();

const baseURL = inject("baseURL");


//表单上面的数据
const foodInfoData = ref({
    id: "",
    admin_name: "",
    admin_pwd: "",
    admin_sex: "",
    admin_tel: "",
    admin_email: "",
    admin_photo: "",
    admin_type: "",

});



//表单验证的规则
const foodInfoDataRules = {
    food_name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
    price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
    cid: [{ required: true, message: "请选择菜品分灰", trigger: "blur" }],
    food_desc: [{ required: true, message: "请输入菜品的描述信息", trigger: "blur" }],
    food_img: [{ required: true, message: "请选择菜品图片", trigger: "blur" }],
    weight: [{ required: true, message: "请选择菜品的权重", trigger: "blur" }],
}

//根据id获取管理员信息
const isLoading = ref(false);
const findById = () => {
    isLoading.value = true;
    let id = route.params.id
    console.log(id);
    API.adminInfo.findById(id).then(result => {
        console.log(result);
        foodInfoData.value = result

    }).catch(error => {

    }).finally(() => {
        isLoading.value = false;

    })
}
findById()




//开始上传图片之前的操作
const isUploadingImg = ref(false)
const beforeUpload = (rawFile) => {
    let reg = /^image\/(jpe?g|png|webp|gif|bnp)$/
    if (reg.test(rawFile.type)) {
        //说明是有个图片
        if (rawFile.size / 1024 / 1024 > 5) {
            //图片大小大于5m
            ElNotification({
                type: "error",
                title: "错误",
                message: "图片大小不能大于5m"
            })
            return false;
        } else {
            //开始上传
            isUploadingImg.value = true;
        }
    } else {
        //说明不是一个图片
        ElNotification({
            type: "error",
            title: "错误",
            message: "请选择图片文件，图片格式为jpg，png，webp，gif，bnp格式"
        })
        // console.log(rawFile);
        return false;
    }

}

const uploadSuccess = (result) => {
    // console.log("文件上传成功");
    // console.log(result);
    foodInfoData.value.food_img = result.data
    isUploadingImg.value = false;
}


//提交表单   
const formEl = ref(null)
const submitForm = () => {

    //验证表单数据是否合格
    console.log(formEl.value);
    formEl.value.validate(valid => {
        //这个valid就是验证的结果
        // console.log(valid);
        if (valid) {

            //说明验证成功，我们要提交数据
            updateFoodInfo()
        } else {
            //验证失败
            ElNotification({
                type: "warning",
                title: "提示",
                message: "请正确填写表单内容"
            })
        }
    })

};

//修改菜品
const isSumbiting = ref(false)
const updateFoodInfo = () => {
    isSumbiting.value = true
    API.adminInfo.update(foodInfoData.value).then(result => {
        ElNotification({
            type: "success",
            title: "提示",
            message: "修改管理员信息成功"
        })

        router.replace({ name: "AdminInfoList" })
    }).catch((error) => {
        ElNotification({
            type: "danger",
            title: "失败了",
            message: "修改修改管理员信息失败，请重试或联系超级管理员"
        })
        console.log(error);
    }).finally(() => {
        isSumbiting.value = false
    })

}


//重置表单

const resetForm = () => {
    // console.log(formEl);
    formEl.value.resetFields();
}

</script>
<style lang="scss" scoped>
:deep(.el-upload) {
    @apply w-full h-full overflow-hidden;
}
</style>